/**
 * @Description:APP首页-地图点击跳转页面，显示附近站点及站点下的线路列表
 * @author tao.xie
 * @date 2019-07-19 15:27
*/
<template>
  <div id="app">
    <!--网络错误的漂浮弹框-->
    <net-err-flow-tips
      class="err_flow"
      @close="close"
      v-if="!stationReached"
    />
    <!-- 地图展示附近的站点列表 -->
    <near-by-map />
    <!--策划展示附近的站点列表及站点下的车辆列表信息-->
    <near-by-staion v-if="stationReached" />
    <station-err
      v-else
      @retry="retry"
    />
  </div>
</template>

<script>
import NearByStaion from './components/NearByStation'
import NearByMap from './components/NearByMap'
import StationErr from './components/StationErr'
import NetErrFlowTips from './components/NetErrFlowTips'
import { getCurrentPosition } from 'vue-xiaobu-utils'
import { getNeayByStationList, getNeayByRouteList } from './api/api'
export default {
  components: {
    NearByStaion,
    NearByMap,
    StationErr,
    NetErrFlowTips
  },
  data() {
    return {
      stationReached: true
    }
  },
  mounted() {
    this._getCurrentPosition()
  },
  methods: {
    async _getCurrentPosition() { // 获取当前gps位置
      try {
        let pos = await getCurrentPosition(this)
        // 更新store中的gps数据
        this.$store.dispatch('fetchPos', pos)
        // 获取附近站点列表
        this._getNearByStationList()
      } catch (err) {
        // TODO 异常处理，获取附近站点失败的页面展示
      }
    },
    async _getNearByStationList() {
      let pos = this.$store.getters.pos
      try {
        let res = await getNeayByStationList(pos.longitude, pos.latitude)
        let asyncTask = []// 异步请求线路任务数组
        let isFecthStation = false// 多任务异步请求执行开关

        res.LIST.forEach((item, index) => {
          asyncTask.push(new Promise((resolve, reject) => {
            let routeList = getNeayByRouteList(item.LONGITUDE, item.LATITUDE, item.STATION_ID)// 获取站点对应的线路
            resolve(routeList)
            if (index === res.LIST.length - 1) {
              isFecthStation = true// 打开多任务异步请求
            }
          }))
          if (isFecthStation) {
            Promise.all(asyncTask).then(arr => {
              // console.log(arr)
              arr.forEach((busItem, busIndex) => {
                // 替换站点对应的线路数据
                if (busItem && busItem.LIST && busItem.LIST.length > 0) {
                  res.LIST[busIndex].BUSES = busItem.LIST
                } else {
                  res.LIST[busIndex].BUSES = []
                }
              })
              // 将站点列表更新进入store
              this.$store.dispatch('fetchStationList', res.LIST)
            })
          }
        })
      } catch (err) {
        // TODO 异常处理，获取附近站点失败的页面展示
        this.stationReached = false
      }
    },
    retry() {
      // 重新获取数据
      this._getNearByStationList()
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  background-color: #ffffff;
}
/* 修复css边距合并带来的问题 */
body {
  position: absolute;
  width: 100%;
}
#app {
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  position: relative;
}
.err_flow {
  position: absolute;
  top: 48px;
  z-index: 1000;
}
</style>
